<template>
  <published-list title="车找人" :visibleTabs="false" defaultSelected="seekPerson" :isAllList="true"
  :otherListMethod="loadListMethod" ref="list">
    <!-- 这里都是筛选栏的内容 -->
    <div class="filters com-onMask" slot="bar">
      <div style="width: 100px;float: left;margin-top: 5px">
      <div class="filter-item" :class="{ selected: selected === 'type' }" @click="openSelect('type')">
        <span>{{ type === '' ? '班次' : ['', '白班', '夜班', '替班'][type] }}</span>
        <x-icon type="ios-arrow-down" size="14" class="arrow"></x-icon>
      </div>
      </div>
      <div class="options" v-if="visibleOptions && showOptions">
        <div class="option" @click="setFilterItem(selected, '')"
          :class="{ selected: '' === $data[selected] }"
        >不设置</div>
        <div class="option" v-for="(item, index) in showOptions" :key="index"
          :class="{ selected: item.id === $data[selected] }"
          @click="setFilterItem(selected, item.id)"
        >{{ item.name }}</div>
      </div>
    </div>
  </published-list>
</template>

<script>
import PublishedList from '@v/publishedList/PublishedList'
export default {
  components: {
    PublishedList
  },

  data (){
    return {
      selected: '',
      type: '',
      search_word:'',
      visibleOptions: false
    }
  },

  beforeRouteLeave (to, from, next){
    this.$alert.mask.hide()
    next()
  },

  computed: {
    // 应显示的列表
    showOptions (){
      var type = [
        { name: '白班', id: 1 },
        { name: '夜班', id: 2 },
        { name: '替班', id: 3 },
      ]

      return { type }[this.selected]
    }
  },

  methods: {
    // 设置筛选项流程：打开选择器 =>  打开遮罩 => 用户点击设置筛选项 => 关闭遮罩 => 重加载
    // 打开选择器
    openSelect (name){
      this.selected = name
      this.visibleOptions = true
      this.$alert.mask.show(() =>{
        this.visibleOptions = false
        this.selected = ''
      })
    },
    search_info(child_search_word){
        console.log('父组件')
        this.search_word = child_search_word;
        this.$refs.list.reload();
    },
    // 设置筛选项
    setFilterItem (name, id){
      this.$data[name] = id
      this.visibleOptions = false
      this.$alert.mask.hide()
      this.selected = ''

      this.$refs.list.reload()
    },

    // 重写调用接口的方法，传给PublishList
    loadListMethod (type, page, isSwipeDownRefresh){
      return _api('seek/getListByCon', {
        level: '0',
        seek_type: 1,
        search_word:this.search_word,
        page: isSwipeDownRefresh ? 1 : page,
        ...(this.type ? { shift_type: this.type } : {}),
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@sty/allList.less';

</style>
